<template>
  <div class="mainBody"
       style="height: 100%">
    <el-row :gutter="20"
            style="margin-left: 20px;height: 40px;line-height: 40px">
      <el-col :span="4">
        <el-button @click="closewin()"
                   type="warning">关闭本页</el-button>
        <!-- <el-button @click="backToHome()" type="warning">返回</el-button>-->
      </el-col>
      <el-col :span="18"
              style="text-align: right">
        <!-- <el-button type="success" >打包下载所有资料</el-button>
        <el-button type="primary"  >打包下载合同资料</el-button>
        <el-button type="primary"  >打包下载非合同资料</el-button> -->

        <!-- <el-button  >项目完结</el-button> -->
        <el-button @click="updateStatus(0)"
                   v-show="'完成'===projInfoForm.projStatus">打回重传</el-button>
        <!-- <el-button  @click="updateStatus(1)" v-show="'进行中'===projInfoForm.projStatus">完成提交</el-button> -->
      </el-col>
    </el-row>
    <div class="wrap">
      <div class="box"
           ref="box"
           style="height: 100%">

        <div class="left"
             style="height: 100vh;">
          <!--左侧div内容-->
          <el-collapse accordion>
            <p><span class="title">项目名: </span> {{ projInfoForm.projName }}</p>

            <el-divider></el-divider>
            <p><span class="title">项目编号:</span> {{ projInfoForm.id }}</p>
            <el-divider></el-divider>
            <p><span class="title">项目负责人:</span> {{ projInfoForm.projUserName }}</p>
            <el-divider></el-divider>
            <p><span class="title">负责人部门：</span><span>{{projInfoForm.depart.name}}</span></p>
            <el-divider></el-divider>
            <p><span class="title">项目关联部门：</span>{{projInfoForm.depart.name}}</p>
            <el-divider></el-divider>
            <p><span class="title">计划总投资:</span> <span v-if="projInfoForm.totalPlanPrice">{{ projInfoForm.totalPlanPrice}} 元</span> <span style="margin-right:10%"></span> <span class="title"> 实际总投资: </span><span v-if="projInfoForm.totalPrice">{{ projInfoForm.totalPrice }} 元</span> </p>
            <el-divider></el-divider>
            <p><span class="title"> 计划开工时间:</span> {{ projInfoForm.planStartTime }}<span style="margin-right:10%"></span> <span class="title">实际开工时间: </span> {{ projInfoForm.finalStartTime }}</p>
            <el-divider></el-divider>
            <p><span class="title">计划完工时间: </span> {{ projInfoForm.planEndTime }} <span style="margin-right:10%"></span> <span class="title">实际完工时间:</span> {{ projInfoForm.finalEndTime }}</p>
            <el-divider></el-divider>

            <el-divider></el-divider>
            <!--      <el-divider></el-divider>-->
            <p><span class="title">业主单位: </span> {{ projInfoForm.ownerUnit }}</p>
            <el-divider></el-divider>
            <p><span class="title">实施单位: </span>{{ projInfoForm.doUnit }}</p>
            <el-divider></el-divider>
            <p><span class="title">执行进度: </span><span v-if="projInfoForm.percentage">{{ projInfoForm.percentage }}%</span></p>
            <el-divider></el-divider>
            <p><span class="title">项目是否完结：</span><el-tag v-if="projInfoForm.projStatus===1"
                      type="warning"
                      effect="dark">已完结</el-tag> <el-tag v-else>未完结</el-tag></p>
            <el-divider></el-divider>
            <p><span class="title">项目内容：</span>{{projInfoForm.projMat}}</p>
            <el-divider></el-divider>
            <p><span class="title">项目备注：</span>{{projInfoForm.remark}}</p>
            <el-divider></el-divider>

          </el-collapse>
          <p style="width: 100%;text-align: center;font-size: 21px;font-weight: bolder">项目工作人员</p>
          <el-table :data="projInfoForm.userList"
                    height="250"
                    border
                    :header-cell-style="{color: 'white', fontSize: '14px', background: '#81AAD2'}"
                    style="width: 80%;margin: 2px auto"
                    empty-text="项目暂时没有关联人员"
                    align="center">
            <el-table-column type="index"
                             width="50">
            </el-table-column>
            <el-table-column prop="userName"
                             label="姓名"
                             width="180"
                             align="center">
            </el-table-column>
            <el-table-column prop="phone"
                             label="手机号码"
                             width="180"
                             align="center">
            </el-table-column>
          </el-table>
        </div>

      </div>
    </div>
  </div>
</template>


<script setup>
import { RouterView } from 'vue-router'
import { ref, onMounted } from "vue"

import {
  doUpdateStatus,
  getProjectPage,
  updateProject,
  deletedProject,
  addProject,
  getProjectById
} from "@/api/project";


import { useUserStore } from "@/stores/userStores";
import { useRouter } from "vue-router";
const userStore = useUserStore();
const router = useRouter();

// 传参
import { useRoute } from "vue-router"
import { ElMessage } from 'element-plus';
const route = useRoute();

const projInfoForm = ref({
  id: '', //项目id
  projName: '', //项目名
  projUserId: '', //项目负责人
  depart: {},
  projMat: '', //建设内容
  totalPlanPrice: '', //计划总投资
  totalPrice: '', //实际总投资
  planStartTime: '', //计划开工时间
  planEndTime: '', //计划结束时间
  finalStartTime: '', //实际开工时间
  finalEndTime: '', //实际结束时间
  ownerUnit: '', //业主单位
  doUnit: '', //实施单位
  remark: '', //备注
  projStatus: '', //项目完成状态 0未完成 1已完成
  createTime: '', //创建时间
  updateTime: '', //更新时间

});

function closewin () {
  router.push("/admin/project");
};


const updateStatus = async (status) => {
  let parm = { "id": route.params.id, "status": status };
  const res = await doUpdateStatus(parm)
  if (res.code === 200) {
    ElMessage.success("提交成功")
    openDetail();
  } else {
    ElMessage.error(res.msg)
    openDetail();
  }
}
const openDetail = async () => {
  const res = await getProjectById(route.params.id);
  projInfoForm.value = res.data;

}

onMounted(() => {
  // 初始加载分页数据
  openDetail();
});

</script>

<style scoped lang="">
</style>